<template>
    <div class="stocks-container">
        <!-- 面包导航 -->
        <el-breadcrumb separator="/" style="padding-left: 10px; padding-bottom: 10px; font-size: 12px">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>物资管理</el-breadcrumb-item>
            <el-breadcrumb-item>物资库存</el-breadcrumb-item>
        </el-breadcrumb>
        <!--   左边卡片主体部分   -->
        <el-row :gutter="20">
            <el-col :span="13" :offset="0">
                <el-card style="margin-bottom: 10px">
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="barStock" style="width: 650px; height: 350px"></div>
                </el-card>
                <el-card>
                    <div id="pieStock" style="width: 590px; height: 225px"></div>
                </el-card>
            </el-col>
            <el-col :span="11" :offset="0">
                <el-card>
                    <!-- 搜索栏 -->
                    <el-form size="mini" :inline="true" :model="queryMap" class="demo-form-inline">
                        <el-form-item>
                            <el-cascader
                                placeholder="请选择分类查询"
                                :change-on-select="true"
                                @change="selectChange"
                                v-model="categorykeys"
                                :props="searchSelectProps"
                                :options="catetorys"
                                clearable
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item>
                            <el-input
                                clearable
                                @clear="search"
                                v-model="queryMap.name"
                                placeholder="物资名称"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="mini" type="primary" @click="search" icon="el-icon-search">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 表格 -->
                    <el-table height="530" border :data="tableData" style="width: 100%">
                        <el-table-column prop="imageUrl" label="图片" align="center" width="80" padding="0px">
                            <template slot-scope="scope">
                                <el-popover placement="right" trigger="hover">
                                    <img
                                        :src="'https://www.zykhome.club/' + scope.row.imageUrl"
                                        style="height: 200px; width: 200px"
                                    />
                                    <img
                                        slot="reference"
                                        :src="'https://www.zykhome.club/' + scope.row.imageUrl"
                                        :alt="scope.row.imgUrl"
                                        style="height: 21px; width: 21px; cursor: pointer"
                                    />
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="140"></el-table-column>
                        <el-table-column prop="model" label="规格" width="120"></el-table-column>
                        <el-table-column prop="stock" label="库存">
                            <template slot-scope="scope">
                                <el-tag size="mini" closable>{{ scope.row.stock }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="unit" label="单位"></el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination
                        style="margin-top: 20px"
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryMap.pageNum"
                        :page-sizes="[9, 10, 15, 20]"
                        layout="total, prev, pager, next, jumper,sizes"
                        :total="total"
                    ></el-pagination>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import echarts from "echarts";
export default {
    name: "Stocks",

    data() {
        return {
            catetorys: [], //类别选择
            searchSelectProps: {
                expandTrigger: "hover",
                value: "id",
                label: "name",
                children: "children",
                checkStrictly: true,
            }, //级联搜索选择器配置项
            categorykeys: [], //当前选中的分类的key
            tableData: [], //表单数据
            queryMap: { pageSize: 9, pageNum: 1 },
            total: 0,
            xData: [],
            yData: [],
            legendData: [], //饼图存放物资名称
            selected: {}, //存放选择的数据
            seriesData: [{ name: "", value: "" }], //饼图数据
        };
    },

    mounted() {
        this.drawBar();
        this.drawPie();
    },

    methods: {
        // 绘制柱状图
        drawBar() {
            const myEchart = echarts.init(document.getElementById("barStock"));
            let option = {
                title: {
                    text: "库存条形图",
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: "none",
                        },
                        dataView: { readOnly: false }, //  缩放
                        magicType: { type: ["line"] }, ///　　折线  直方图切换
                        restore: {}, // 重置
                        saveAsImage: {}, // 导出图片
                    },
                },
                tooltip: {}, //放上去显示数量和名字
                legend: {
                    data: ["库存量"],
                },
                xAxis: {
                    type: "category",
                    data: [
                        "N95口罩",
                        "普通医用口罩",
                        "普通温度计",
                        "生理盐水",
                        "东北大米",
                        "防毒面具",
                        "霸王洗发水",
                        "卫龙辣条",
                        "医用酒精",
                    ],
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        name: "库存量",
                        type: "bar",
                        showBackground: true,
                        data: [48, 5, 37, 6, 18, 64, 14, 16, 31],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = [
                                        "#0780cf ",
                                        "#fa6d1d ",
                                        "#ac2026 ",
                                        "#701866 ",
                                        "#d22e8d ",
                                        "#FE8463",
                                        "#a195c5 ",
                                        "#FAD860",
                                        "#F3A43B",
                                        "#60C0DD",
                                        "#D7504B",
                                        "#a195c5  ",
                                        "#F4E001",
                                        "#F0805A",
                                        "#63b2ee",
                                    ];
                                    return colorList[params.dataIndex];
                                },
                                label: {
                                    show: true,
                                    position: "top",
                                    formatter: "{b}\n{c}",
                                },
                            },
                        },
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myEchart.setOption(option);
        },

        // 绘制饼状图
        drawPie() {
            const myEchart = echarts.init(document.getElementById("pieStock"));
            const option = {
                title: {
                    text: "库存占比图",
                    left: "left",
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {}, // 导出图片
                        restore: {}, // 重置
                    },
                },
                legend: {
                    orient: "vertical",
                    left: "right",
                    type: "scroll",
                    top: 40,
                    bottom: 34,
                    selected: this.selected,
                    data: [
                        "N95口罩",
                        "普通医用口罩",
                        "普通温度计",
                        "生理盐水",
                        "东北大米",
                        "防毒面具",
                        "霸王洗发水",
                        "卫龙辣条",
                        "医用酒精",
                    ],
                },
                series: [
                    {
                        name: "物资名称",
                        type: "pie",
                        radius: "55%",
                        center: ["45%", "50%"],
                        data: [
                            { value: 335, name: "N95口罩" },
                            { value: 310, name: "普通医用口罩" },
                            { value: 234, name: "普通温度计" },
                            { value: 135, name: "生理盐水" },
                            { value: 1548, name: "东北大米" },
                            { value: 148, name: "防毒面具" },
                            { value: 98, name: "霸王洗发水" },
                            { value: 148, name: "卫龙辣条" },
                            { value: 448, name: "医用酒精" },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            };

            // 使用刚指定的配置项和数据显示图表。
            myEchart.setOption(option);
        },

        // 选择分类
        selectChange() {},

        // 搜索
        search() {},

        // 获取表格数据
        getStockList() {},

        //改变页码
        handleSizeChange(newSize) {
            this.queryMap.pageSize = newSize;
            this.getStockList();
        },

        //翻页
        handleCurrentChange(current) {
            this.queryMap.pageNum = current;
            this.getStockList();
        },
    },
};
</script>

<style scoped></style>
